<template>
  <h3>比特人的礼物清单</h3>
  <table>
    <thead>
      <tr>
        <th>名称</th>
        <th>数量</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in goodsList" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.count }}</td>
      </tr>
    </tbody>
  </table>
  <p>总计：{{ total }}</p>
  <p>总计：{{ total }}</p>
  <p>总计：{{ total }}</p>
  <hr>
  <p>总计：{{ getTotal() }}</p>
  <p>总计：{{ getTotal() }}</p>
  <p>总计：{{ getTotal() }}</p>

  <!-- <p>总计：<span v-text="total"></span></p> -->
</template>

<script setup>
  import { ref, computed } from 'vue'
  const goodsList = ref([ {id: 1, name: '篮球', count: 2},
    {id: 2, name: '排球', count: 1},
    {id: 3, name: '足球', count: 2}
  ])
  const total = computed(() => {
    console.log("computed")
    return goodsList.value.reduce((prev, item) => prev + item.count, 0)
  })
  const getTotal = () => {
    console.log("function")
    return goodsList.value.reduce((prev, item) => prev + item.count, 0)
  }
  // console.log(total.value)
</script>

<style scoped>
  table{
    width: 300px;
    border: 1px solid #333;
  }
  th{
    border: 1px solid #333;
  }
  td{
    text-align: center;
    border: 1px solid #333;
  }
</style>